{% extends "base/base.html" %}
{% load static %}
{% block css %}
    <!--LOADING 时间插件 FOR PAGE-->
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-colorpicker/css/colorpicker.css' %}">#}
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-datepicker/css/datepicker.css' %}">#}
    {#    <link type="text/css" rel="stylesheet"#}
    {#          href="{% static 'vendors/bootstrap-daterangepicker/daterangepicker-bs3.css' %}">#}
    {#    <link type="text/css" rel="stylesheet"#}
    {#          href="{% static 'vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css' %}">#}
    {#    <link type="text/css" rel="stylesheet"#}
    {#          href="{% static 'vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css' %}">#}
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-clockface/css/clockface.css' %}">#}
    {#    <link type="text/css" rel="stylesheet" href="{% static 'vendors/bootstrap-switch/css/bootstrap-switch.css' %}">#}

    <!--LOADING STYLESHEET FOR UPLOAD PAGE-->
    <link type="text/css" rel="stylesheet" href="{% static 'vendors/jquery-file-upload/css/jquery.fileupload.css' %}">
    <link type="text/css" rel="stylesheet"
          href="{% static 'vendors/jquery-file-upload/css/jquery.fileupload-ui.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'vendors/jquery-file-upload/css/blueimp-gallery.min.css' %}">

{% endblock %}

{% block right_menus %}
    <li><i class="fa fa-home"></i>&nbsp;<a href="{% url 'my_admin:list_channel' %}">首页</a>&nbsp;&nbsp;<i
            class="fa fa-angle-right"></i>
    </li>
    <li><a href="{% url 'my_admin:list_channel' %}">渠道列表</a>&nbsp;<i class="fa fa-angle-right"></i></li>
    <li class="active">{% if channel_obj %}修改渠道{% else %}添加渠道{% endif %}</li>
{% endblock %}

{% block context %}

    <div class="row">
        <div class="col-lg-12">
            <div class="portlet box portlet-blue">
                <div class="portlet-header">
                    <div class="caption">{% if product_id %}产品修改{% else %}添加渠道{% endif %}</div>
                    <div class="tools"><i class="fa fa-chevron-up"></i><i data-toggle="modal"
                                                                          data-target="#modal-config"
                                                                          class="fa fa-cog"></i><i
                            class="fa fa-refresh"></i><i class="fa fa-times"></i>
                    </div>
                </div>
                <div class="portlet-body pan">
                    <form action="" class="form-horizontal form-separated" id="my_form" method="post">

                        {% csrf_token %}
                        <div class="form-body pdl">

                            <div class="form-group">
                                <label class="col-md-3 control-label">名称</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" name="name">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">联系人姓名</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" name="username">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">联系人电话</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" name="tel">
                                </div>
                            </div>
                            {% if not channel_obj %}
                                <div class="form-group">
                                    <label class="col-md-3 control-label">账号</label>
                                    <div class="col-md-7">
                                        <input type="text" class="form-control" name="account">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">密码</label>
                                    <div class="col-md-7">
                                        <input type="password" class="form-control" name="password" id="password">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">确认密码</label>
                                    <div class="col-md-7">
                                        <input type="password" class="form-control" name="password_again">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label">是否可以提现</label>
                                    <div class="col-md-7">
                                        <select class="form-control" name="can_transfer">
                                            <option value="1" selected>可以</option>
                                            <option value="2">不可以</option>
                                        </select>
                                    </div>
                                </div>
                            {% endif %}

                            <div class="form-group">
                                <label class="col-md-3 control-label">层级数</label>
                                <div class="col-md-7">
                                    <input value="0" type="text" class="form-control" name="level_num">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">检查菜单</label>
                                <div class="col-md-7">
                                    <select class="form-control" name="check_menus" onchange="change_menus(this)">
                                        <option value="1" selected>不检查</option>
                                        <option value="2">检查整改渠道</option>
                                        <option value="3">只检查最后一个层级</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" id="sign" style="display: none">
                                <label class="col-md-3 control-label">零号平台菜单</label>
                                <div class="col-md-3">
                                    <select name="menu_from" class="menu-multiselect form-control" size="8"
                                            multiple="multiple">
                                        {% for i in no_set_menu %}
                                            <option value="{{ i.name }}">{{ i.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <button type="button" id="js_right_All_2" class="btn btn-block"><i
                                            class="glyphicon glyphicon-forward"></i></button>
                                    <button type="button" id="js_right_Selected_2" class="btn btn-block"><i
                                            class="glyphicon glyphicon-chevron-right"></i></button>
                                    <button type="button" id="js_left_Selected_2" class="btn btn-block"><i
                                            class="glyphicon glyphicon-chevron-left"></i></button>
                                    <button type="button" id="js_left_All_2" class="btn btn-block"><i
                                            class="glyphicon glyphicon-backward"></i></button>
                                </div>
                                <div class="col-md-3">
                                    <select name="set_menus" id="js_multiselect_to_2" class="form-control" size="8"
                                            multiple="multiple">
                                        {% for i in set_menu %}
                                            <option value="{{ i.name }}">{{ i.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">是否展示滚动条</label>
                                <div class="col-md-7">
                                    <select class="form-control" name="banner_ad">
                                        <option value="1" selected>展示</option>
                                        <option value="2">不展示</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">添加产品</label>
                                <div class="col-md-3">
                                    <select name="from" class="product-multiselect form-control" size="8"
                                            multiple="multiple">
                                        {% for i in not_set %}
                                            <option value="{{ i.id }}">{{ i.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-1">
                                    <button type="button" id="js_right_All_1" class="btn btn-block"><i
                                            class="glyphicon glyphicon-forward"></i></button>
                                    <button type="button" id="js_right_Selected_1" class="btn btn-block"><i
                                            class="glyphicon glyphicon-chevron-right"></i></button>
                                    <button type="button" id="js_left_Selected_1" class="btn btn-block"><i
                                            class="glyphicon glyphicon-chevron-left"></i></button>
                                    <button type="button" id="js_left_All_1" class="btn btn-block"><i
                                            class="glyphicon glyphicon-backward"></i></button>
                                </div>

                                <div class="col-md-3">
                                    <select name="to" id="js_multiselect_to_1" class="form-control" size="8"
                                            multiple="multiple">
                                        {% for i in seted %}
                                            <option value="{{ i.id }}">{{ i.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-md-3 control-label">是否展示佣金</label>
                                <div class="col-md-7">
                                    <select class="form-control" name="show_cash">
                                        <option value="1" selected>展示</option>
                                        <option value="2">不展示</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                {% if product_info %}
                                    <button type="submit" class="btn btn-primary">修改</button>
                                    &nbsp;{% else %}
                                    <button type="submit" class="btn btn-primary">提交</button>
                                {% endif %}
                                <button onclick="commit_data()" type="button" class="btn btn-default">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}
    {#    <script src="{% static 'vendors/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/moment/moment.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-timepicker/js/bootstrap-timepicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-clockface/js/clockface.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-colorpicker/js/bootstrap-colorpicker.js' %}"></script>#}
    {#    <script src="{% static 'vendors/bootstrap-switch/js/bootstrap-switch.min.js' %}"></script>#}
    {#    <script src="{% static 'vendors/jquery-maskedinput/jquery-maskedinput.js' %}"></script>#}
    {#    <script src="{% static 'vendors/charCount.js' %}"></script>#}
    {#    <script src="{% static 'js/form-components.js' %}"></script>#}
    <!--for upload page-->
    <script src="{% static 'vendors/jquery-file-upload/js/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'my/dist/js/multiselect.js' %}"></script>
    <script src="{% static 'vendors/jquery-file-upload/js/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'vendors/jquery-file-upload/js/jquery.fileupload.js' %}"></script>

    <!--for 验证 page-->
    <script src="{% static 'vendors/jquery-validate/jquery.validate.min.js' %}"></script>
    <script src="{% static 'js/form-validation.js' %}"></script>
    <script src="{% static 'my/add_edit_channel.js' %}"></script>



    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('.product-multiselect').multiselect({
                right: '#js_multiselect_to_1',
                rightAll: '#js_right_All_1',
                rightSelected: '#js_right_Selected_1',
                leftSelected: '#js_left_Selected_1',
                leftAll: '#js_left_All_1'
            });
        });

        jQuery(document).ready(function ($) {
            $('.menu-multiselect').multiselect({
                right: '#js_multiselect_to_2',
                rightAll: '#js_right_All_2',
                rightSelected: '#js_right_Selected_2',
                leftSelected: '#js_left_Selected_2',
                leftAll: '#js_left_All_2'
            });
        });
    </script>

    <script>

        function newBuildReturnValue(select_id) {
            var ret = [];
            $("#" + select_id + " option").each(function () {
                //遍历所有option
                var value = $(this).val();   //获取option值
                if (value != '') {
                    ret.push(value);
                }
            });
            return ret;
        }
        // 检查菜单联动
        function change_menus(el) {
            if ($(el).val() != 1) {
                $('#sign').show()
            }
            else {
                $('#sign').hide()
            }
        }

        var flag = false;
        $.validator.setDefaults({
            submitHandler: function (form) {
                $("form").serialize();
                if ("{{ channel_obj }}") {
                    if (flag) {
                        return false
                    }
                    flag = true;
                    edit_data()
                }
                else {
                    if (flag) {
                        return false
                    }
                    flag = true;
                    commit_data()

                }
            }
        });
        // 添加
        var post_url = "{% url 'my_admin:add_channel' %}";
        function commit_data() {
            var data = $("form").serialize();
            var ret_product = newBuildReturnValue("js_multiselect_to_1");
            var ret_menus = newBuildReturnValue("js_multiselect_to_2");
            data += "&products=" + ret_product + "&sign=" + ret_menus;
            $.ajax({
                type: 'POST',
                url: post_url,
                data: data,
                success: function (data) {
                    if (data.status == "ok") {
                        alert(data.msg);
                        window.location.href = "{% url 'my_admin:list_channel' %}"
                    }
                    else {
                        alert(data.msg);
                        window.location.reload()
                    }
                },
                error: function (request) {
                    alert("服务器异常, 请刷新重试");

                }
            });
        }

        // 修改
        function edit_data() {
            post_url = "/admin/edit_channel/{{ channel_obj.id }}";
            var data = $("form").serialize();
            var ret_product = newBuildReturnValue("js_multiselect_to_1");
            var ret_menus = newBuildReturnValue("js_multiselect_to_2");
            data += "&products=" + ret_product + "&sign=" + ret_menus;
            $.ajax({
                type: 'POST',
                url: post_url,
                data: data,
                success: function (data) {
                    if (data.status == "ok") {
                        alert(data.msg);
                        history.go(-1)
                    }
                    else {
                        alert(data.msg);
                        flag = false
                    }
                },
                error: function (request) {
                    alert("服务器异常");
                }
            });
        }
    </script>
    <script>
        $(document).ready(function () {
            if ("{{ channel_obj }}") {
                $("input[name='name']").val("{{ channel_obj.name }}");
                $("input[name='username']").val("{{ channel_obj.username }}");
                $("input[name='tel']").val("{{ channel_obj.tel }}");
                if ("{{ channel_obj.is_show_cash }}" == "True") {
                    $("select[name='show_cash']").val(1);
                }
                else {
                    $("select[name='show_cash']").val(2);
                }
                if ("{{ channel_obj.banner_ad }}" == "True") {
                    $("select[name='banner_ad']").val(1);
                }
                else {
                    $("select[name='banner_ad']").val(2);
                }
                $("input[name='level_num']").val("{{ channel_obj.level_num }}");

                if ("{{ channel_obj.check_menus }}" != "1") {
                    $('#sign').show()
                    var sign = "";
                    {% for i in channel_obj.channelmenus_set.all %}
                        sign += "{{ i.name }},";
                    {% endfor %}
                    sign = sign.substring(0, sign.length - 1);
                    $("input[name='sign']").val(sign);
                }
                else {
                    $('#sign').hide()
                }

                $("select[name='check_menus']").val("{{ channel_obj.check_menus }}");

                var html = "";
                html = "<div class='show_file'>"
                {% for i in img_url %}
                    html += "<input style='display: none' name='img_url' value='{{ i }}'> " +
                        "<a target='_blank' class='show_img' href='{{ i }}'>" +
                        "<img style='width: 23%'src='{{ i }}'></a>";
                {% endfor %}
                html += "</div>";
                $('#img_url').parent().parent().append(html);

                if ('{{ product_info.website_img }}') {
                    html = "<div class='show_file'>";
                    html += "<input style='display: none' name='website_img' value='{{ product_info.website_img.id }}'> " +
                        "<a target='_blank' class='show_img' href='{{ product_info.website_img.img.url }}'>" +
                        "<img style='width: 23%'src='{{ product_info.website_img.img.url }}'></a>";
                    html += "</div>";
                    $('#website_img').parent().parent().append(html);
                }

                if ('{{ product_info.related_img }}') {
                    html = "<div class='show_file'>";
                    html += "<input style='display: none' name='related_img' value='{{ product_info.related_img.id }}'> " +
                        "<a class='show_img' target='_blank' href='{{ product_info.related_img.img.url }}'>{{ product_info.related_img.name }}</a>";
                    html += "</div>";
                    $('#related_img').parent().parent().append(html);
                }
            }

        });
    </script>
{% endblock %}